<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>边距与内边距教程</title>
<style>
  body {
    font-family: 'Microsoft YaHei', Arial, sans-serif;
  }
  .container {
    width: 80%;
    margin: 20px auto;
    padding: 20px;
    border: 1px solid #000;
  }
  .box {
    width: 100px;
    height: 100px;
    margin: 10px;
    padding: 10px;
    background-color: #f0f0f0;
    border: 1px solid #ddd;
    box-sizing: border-box;
  }
  .explanation {
    background-color: #e7f7c4;
    padding: 10px;
    margin-top: 20px;
  }
</style>
</head>
<body>

<div class="container">
  <h1>边距与内边距教程</h1>
  <p>欢迎来到CSS边距和内边距的基础教程。在这里我们将解释边距和内边距是什么以及如何使用它们。</p>

  <h2>什么是边距（Margin）？</h2>
  <p>边距是元素边框外的空间。它在元素之间创建空间，并且没有背景颜色。</p>
  <div class="box">带有边距的盒子</div>
  <div class="explanation">
    <p>在上方的盒子中，你可以看到10px的边距。这个空间是透明的，并且将盒子与其他元素分隔开。</p>
  </div>

  <h2>什么是内边距（Padding）？</h2>
  <p>内边距是元素边框和内容之间的空间。它在元素内部创建空间，并且受到背景颜色的影响。</p>
  <div class="box" style="padding: 20px;">带有内边距的盒子</div>
  <div class="explanation">
    <p>在上方的盒子中，你可以看到20px的内边距。这个空间填充了盒子的背景颜色。</p>
  </div>

  <h2>如何使用边距和内边距</h2>
  <p>你可以通过使用CSS属性<code>margin</code>和<code>padding</code>来控制元素的边距和内边距。你可以一次性指定所有边的大小，也可以单独指定。</p>
  <pre>
    /* 所有边 */
    .element {
      margin: 10px;
      padding: 10px;
    }

    /* 单独的边 */
    .element {
      margin-top: 10px;
      margin-right: 20px;
      margin-bottom: 10px;
      margin-left: 20px;

      padding-top: 10px;
      padding-right: 20px;
      padding-bottom: 10px;
      padding-left: 20px;
    }
  </pre>
</div>

</body>
</html>